<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div>
        <!-- 搜索 -->
        <el-input v-model="query.name" clearable size="small" placeholder="输入模型名称或源表名搜索" style="width: 210px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <el-date-picker
          v-model="query.createTime"
          :default-time="['00:00:00','23:59:59']"
          type="daterange"
          range-separator=":"
          size="small"
          class="date-item"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
        <el-button v-model="query.name" class="filter-item" size="mini" type="success" icon="el-icon-search" @click="primaryToQuery(query.name, query.createTime)">搜索</el-button>
        <el-button class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left" @click="primaryResetQuery">重置</el-button>
      </div>
      <span class="crud-opts-left">
        <!--左侧插槽-->
        <el-button
          v-if="optShow.add"
          v-permission="permission.add"
          class="filter-item"
          size="mini"
          type="primary"
          icon="el-icon-plus"
          @click="crud.toAdd"
        >
          新增
        </el-button>
        <el-button
          v-if="optShow.edit"
          v-permission="permission.edit"
          class="filter-item"
          size="mini"
          type="success"
          icon="el-icon-edit"
          :disabled="permissionRouter.edit"
          @click="toEdit"
        >
          修改
        </el-button>
        <el-button
          v-if="optShow.del"
          slot="reference"
          v-permission="permission.del"
          class="filter-item"
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :loading="crud.delAllLoading"
          :disabled="permissionRouter.del"
          @click="toDelete(crud.selections)"
        >
          删除
        </el-button>
        <!--右侧-->
        <slot name="right" />
      </span>
    </div>
    <!--表单组件-->
    <el-dialog append-to-body :close-on-click-modal="false" :before-close="cancel" :visible.sync="crud.status.cu > 0" :title="crud.status.title" :fullscreen="true" :show-close="false" top="0%" :close-on-press-escape="false">
      <el-steps :active="active" finish-status="success" align-center>
        <el-step title="表字段抽取" icon="el-icon-edit"></el-step>
        <el-step title="模板注册" icon="el-icon-s-opportunity"></el-step>
      </el-steps>
      <div v-if="choosed==0">
        <el-form ref="form" :model="form" :rules="rules">
          <el-row>
            <el-col :span="8">
              <el-form-item label-width="25%">
                <el-radio v-model="radio" label="本地选择" border @change="localchoose" />
              </el-form-item>
              <!--选择本地数据库表-->
              <el-form-item label="本地选择" label-width="160px" top>
                <el-select v-model="localTableValue" clearable filterable @change="sourceTable(localTableValue)" :disabled="localchoosed" placeholder="请选择本地表" style="width: 200px">
                  <el-option
                    v-for="item in localTable"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label-width="25% ">
                <el-radio v-model="radio" label="源表拉取" border @change="sourcechoose" />
              </el-form-item>
              <!--选择数据源-->
              <el-form-item label="数据源" label-width="150px">
                <el-select v-model="sourceValue" clearable filterable @change="sourceChange(sourceValue)" :disabled="sourcechoosed" placeholder="选择数据源" style="width: 200px">
                  <el-option
                    v-for="item in source"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <!--选择源表名-->
              <el-form-item label="源表名" label-width="150px">
                <el-select v-model="sourceTableValue" clearable filterable @change="sourceTable(sourceTableValue)" :disabled="sourcechoosed" placeholder="选择数据源表" style="width: 200px">
                  <el-option
                    v-for="item in sourceTableName"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="目标表名" label-width="150px" prop="tableName">
                <el-input v-model="form.tableName" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div>
          <el-row>
            <el-col :span="11">
              <el-table
                ref="leftTable"
                :data="form.originalData"
                :row-key="getRowKey"
                border
                style="width: 100%"
                @selection-change="checkAll"
              >
                <el-table-column
                  type="selection"
                  :reserve-selection="false"
                  width="30"
                />
                <el-table-column
                  prop="field"
                  label="字段名称"
                  width="150"
                />
                <el-table-column
                  prop="type"
                  label="类型"
                  width="100"
                />
                <el-table-column
                  label="中文名称"
                  prop="cname"
                />
              </el-table>
            </el-col>
            <el-col :span="2">
              <div class="opSetting">
                <div>
                  <el-button icon="el-icon-d-arrow-right" :disabled="form.nowSelectData.length?false:true" type="primary" @click="handelSelect">
                    选中
                  </el-button>
                </div>
                <div class="spacing">
                  <el-button icon="el-icon-d-arrow-left" :disabled="form.nowSelectRightData.length?false:true" type="primary" @click="handleRemoveSelect">
                    删除
                  </el-button>
                </div>
              </div>
            </el-col>
            <el-col :span="11">
              <el-table
                ref="rightTable"
                :data="form.selectArr"
                :row-key="getRowKey"
                border
                style="width: 100%"
                @selection-change="checkRightAll"
              >
                <el-table-column
                  type="selection"
                  :reserve-selection="false"
                  width="30"
                />
                <el-table-column
                  prop="field"
                  label="字段名称"
                  width="150"
                />
                <el-table-column
                  prop="type"
                  label="类型"
                  width="100"
                />
                <el-table-column
                  label="中文名称"
                  prop="cname"
                />
              </el-table>
            </el-col>
          </el-row>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="next">下一步</el-button>
        </div>
      </div>

      <div v-if="choosed==1">
        <el-form ref="form" :model="form" size="small" label-width="100px" :rules="rules">
          <el-form-item text-align="center">
            <el-form-item label="模型编码" prop="modelCode">
              <el-input v-model="form.modelCode" style="width: 370px;"/>
            </el-form-item>
            <el-form-item label="模型名称">
              <el-input v-model="form.modelName" style="width: 370px;" />
            </el-form-item>
            <el-form-item label="目标表名" prop="tableName">
              <el-input v-model="form.tableName" :disabled="true" style="width: 370px;" />
            </el-form-item>
          </el-form-item>
          <el-form-item align="center">
            <el-table
              :data="form.selectArr"
              :row-key="getRowKey"
              border
              style="width: 80%"
              class="tb-edit"
              highlight-current-row>
              <el-table-column
                prop="field"
                label="字段名称"
                width="200"
              />
              <el-table-column
                prop="type"
                label="类型"
                width="150"
              />
              <el-table-column
                label="中文名称"
                :resizable="true"
              >
                <template scope="scope">
                  <el-input size="small" v-model="scope.row.cname" placeholder="请输入中文名称" @change="handleEdit(scope.$index, scope.row)"></el-input> <span>{{scope.row.cname}}</span>
                </template>
              </el-table-column>>
            </el-table>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="back">上一步</el-button>
          <el-button type="primary" @click="cancel">完成</el-button>
        </div>
      </div>
    </el-dialog>

    <!--表格渲染-->
    <el-table ref="table" :data="this.tableData" :stripe="true" @selection-change="seleChange">
      <el-table-column :selectable="checkboxT" type="selection" width="55" align="center" fixed/>
      <el-table-column label="模型编码" prop="modelCode" align="center" width="80"/>
      <el-table-column label="模型名称" prop="modelName" align="center" width="80"/>
      <el-table-column label="数据源" prop="source" align="center" width="120"/>
      <el-table-column label="所属库" prop="database" align="center" width="120"/>
      <el-table-column label="源表名" prop="sourceTableName" align="center" width="120"/>
      <el-table-column label="源表中文名" prop="chineseTableName" align="center" width="150"/>
      <el-table-column label="目标表名" prop="targetTableName" align="center" width="120"/>
      <el-table-column label="创建人" prop="createPerson" align="center" width="80"/>
      <el-table-column label="创建时间" prop="createTime" align="center" width="200"/>
      <el-table-column label="更新人" prop="updatePerson" align="center" width="80"/>
      <el-table-column label="更新时间" prop="updateTime" align="center" width="200"/>
      <el-table-column label="状态" prop="status" align="center" width="80" fixed="right">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="0"
            :inactive-value="1"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="changeEnabled(scope.row, scope.row.status)"
          />
        </template>
      </el-table-column>
      <el-table-column label="详情" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleClick(scope.row)">详情信息</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--修改表单-->
    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :before-close="cancelChange"
      :visible.sync="changeTableDataDialog"
      :title="product"
      :fullscreen="true">
      <el-steps :active="active" finish-status="success" align-center>
        <el-step title="表字段抽取" icon="el-icon-edit"></el-step>
        <el-step title="模板注册" icon="el-icon-s-opportunity"></el-step>
      </el-steps>
      <div v-if="choosed==0">
        <el-form ref="form" :model="form" :rules="rules">
          <el-row>
            <el-col :span="8">
              <el-form-item label-width="25%">
                <el-radio v-model="radio" label="本地选择" border @change="localchoose" />
              </el-form-item>
              <!--选择本地数据库表-->
              <el-form-item label="本地选择" label-width="160px" top>
                <el-select v-model="localTableValueChange" clearable filterable @change="sourceTable(localTableValueChange)" :disabled="localchoosed" placeholder="请选择本地表" style="width: 200px">
                  <el-option
                    v-for="item in localTable"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label-width="25% ">
                <el-radio v-model="radio" label="源表拉取" border @change="sourcechoose" />
              </el-form-item>
              <!--选择数据源-->
              <el-form-item label="数据源" label-width="150px">
                <el-select v-model="sourceValueChange" clearable filterable @change="sourceChange(sourceValueChange)" :disabled="sourcechoosed" placeholder="选择数据源" style="width: 200px">
                  <el-option
                    v-for="item in source"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <!--选择源表名-->
              <el-form-item label="源表名" label-width="150px">
                <el-select v-model="sourceTableValueChange" clearable filterable @change="sourceTable(sourceTableValueChange)" :disabled="sourcechoosed" placeholder="选择数据源表" style="width: 200px">
                  <el-option
                    v-for="item in sourceTableName"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="目标表名" label-width="150px" prop="tableName">
                <el-input v-model="form.tableName" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div>
          <el-row>
            <el-col :span="11">
              <el-table
                ref="leftTable"
                :data="form.originalData"
                :row-key="getRowKey"
                border
                style="width: 100%"
                @selection-change="checkAll"
              >
                <el-table-column
                  type="selection"
                  :reserve-selection="false"
                  width="30"
                />
                <el-table-column
                  prop="field"
                  label="字段名称"
                  width="150"
                />
                <el-table-column
                  prop="type"
                  label="类型"
                  width="100"
                />
                <el-table-column
                  label="中文名称"
                  prop="cname"
                />
              </el-table>
            </el-col>
            <el-col :span="2">
              <div class="opSetting">
                <div>
                  <el-button icon="el-icon-d-arrow-right" :disabled="form.nowSelectData.length?false:true" type="primary" @click="handelSelect">
                    选中
                  </el-button>
                </div>
                <div class="spacing">
                  <el-button icon="el-icon-d-arrow-left" :disabled="form.nowSelectRightData.length?false:true" type="primary" @click="handleRemoveSelect">
                    删除
                  </el-button>
                </div>
              </div>
            </el-col>
            <el-col :span="11">
              <el-table
                ref="rightTable"
                :data="form.selectArr"
                :row-key="getRowKey"
                border
                style="width: 100%"
                @selection-change="checkRightAll"
              >
                <el-table-column
                  type="selection"
                  :reserve-selection="false"
                  width="30"
                />
                <el-table-column
                  prop="field"
                  label="字段名称"
                  width="150"
                />
                <el-table-column
                  prop="type"
                  label="类型"
                  width="100"
                />
                <el-table-column
                  label="中文名称"
                  prop="cname"
                />
              </el-table>
            </el-col>
          </el-row>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelChange">取消</el-button>
          <el-button type="primary" @click="next">下一步</el-button>
        </div>
      </div>

      <div v-if="choosed==1">
        <el-form ref="form" :model="form" size="small" label-width="100px" :rules="rules">
          <el-form-item text-align="center">
            <el-form-item label="模型编码" prop="modelCode">
              <el-input v-model="form.modelCode" style="width: 370px;"/>
            </el-form-item>
            <el-form-item label="模型名称">
              <el-input v-model="form.modelName" style="width: 370px;" />
            </el-form-item>
            <el-form-item label="目标表名">
              <el-input v-model="form.tableName" :disabled="true" style="width: 370px;" />
            </el-form-item>
          </el-form-item>
          <el-form-item align="center">
            <el-table
              :data="form.selectArr"
              :row-key="getRowKey"
              border
              style="width: 80%"
              class="tb-edit"
              highlight-current-row>
              <el-table-column
                prop="field"
                label="字段名称"
                width="200"
              />
              <el-table-column
                prop="type"
                label="类型"
                width="150"
              />
              <el-table-column
                label="中文名称"
                :resizable="true"
              >
                <template scope="scope">
                  <el-input size="small" v-model="scope.row.cname" placeholder="请输入中文名称" @change="handleEdit(scope.$index, scope.row)"></el-input> <span>{{scope.row.cname}}</span>
                </template>
              </el-table-column>>
            </el-table>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="back">上一步</el-button>
          <el-button type="primary" @click="cancelChange">完成</el-button>
        </div>
      </div>
    </el-dialog>
    <!--详情信息-->
    <el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import crudDept from '@/api/management/dataconfig'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import CRUD, { presenter, header, form, crud } from '@crud/crud'

// crud交由presenter持有
const defaultCrud = CRUD({ title: '数据模型注册', url: '', crudMethod: { ...crudDept }})
const defaultForm = { id: null, name: null, pid: 1, enabled: 'true' }
export default {
  name: 'Dept',
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  // 设置数据字典
  dicts: ['dataconfig_status'],
  data() {
    return {
      // 弹框页码控制
      choosed: 0,
      // 本地选择控制
      localchoosed: false,
      // 源表选择控制
      sourcechoosed: true,
      // 单选-默认本地选择
      radio: '本地选择',
      // 主页操作栏显示哪些按钮
      optShow: {
        add: true,
        edit: true,
        del: true
      },
      // 按钮操作控制
      permissionRouter: {
        add: false,
        edit: true,
        del: true
      },
      // 按钮权限控制
      permission: {
        add: ['admin', 'dept:add'],
        edit: ['admin', 'dept:edit'],
        del: ['admin', 'dept:del']
      },
      enabledTypeOptions: [
        { key: 'true', display_name: '发布' },
        { key: 'false', display_name: '未发布' }
      ],
      rules: {
        tableName: [{ required: true, message: '目标表名不能为空', trigger: 'blur' }],
        modelCode: [{ required: true, message: '模型编码不能为空', trigger: 'blur' }]
      },
      // 表数据
      tableData: [{ modelCode: 'model1', modelName: '模型1', source: '61oracle源', sourceTableName: 'dcp1', chineseTableName: 'dcp1表', targetTableName: 'targetTableName1', database: 'PDCS',
        createTime: '2020-06-01 00:00:00', createPerson: 'admin', updateTime: '2020-06-01 00:00:00', updatePerson: 'admin', status: 0 },
      { modelCode: 'model2', modelName: '模型2', source: '61oracle源', sourceTableName: 'dcp1', chineseTableName: 'dcp1表', targetTableName: 'targetTableName2', database: 'PDCS',
        createTime: '2020-06-01 00:00:00', createPerson: 'admin', updateTime: '2020-06-01 00:00:00', updatePerson: 'admin', status: 0 },
      { modelCode: 'model3', modelName: '模型3', source: '61oracle源', sourceTableName: 'dcp1', chineseTableName: 'dcp1表', targetTableName: 'targetTableName3', database: 'PDCS',
        createTime: '2020-06-01 00:00:00', createPerson: 'admin', updateTime: '2020-06-01 00:00:00', updatePerson: 'admin', status: 0 }],
      // 封装查询的数据
      queryTableData: [],
      // 临时数据
      temporaryTableData: [{ modelCode: 'model1', modelName: '模型1', source: '61oracle源', sourceTableName: 'dcp1', chineseTableName: 'dcp1表', targetTableName: 'targetTableName1', database: 'PDCS',
        createTime: '2020-06-01 00:00:00', createPerson: 'admin', updateTime: '2020-06-01 00:00:00', updatePerson: 'admin', status: 0 },
      { modelCode: 'model2', modelName: '模型2', source: '61oracle源', sourceTableName: 'dcp1', chineseTableName: 'dcp1表', targetTableName: 'targetTableName2', database: 'PDCS',
        createTime: '2020-06-01 00:00:00', createPerson: 'admin', updateTime: '2020-06-01 00:00:00', updatePerson: 'admin', status: 0 },
      { modelCode: 'model3', modelName: '模型3', source: '61oracle源', sourceTableName: 'dcp1', chineseTableName: 'dcp1表', targetTableName: 'targetTableName3', database: 'PDCS',
        createTime: '2020-06-01 00:00:00', createPerson: 'admin', updateTime: '2020-06-01 00:00:00', updatePerson: 'admin', status: 0 }],
      localTable: [{
        value: 'dcp1',
        label: 'dcp1表'
      }, {
        value: 'dcp2',
        label: 'dcp2表'
      }, {
        value: 'dcp3',
        label: 'dcp3表'
      }, {
        value: 'dcp4',
        label: 'dcp4表'
      }, {
        value: 'dcp5',
        label: 'dcp5表'
      }, {
        value: 'dcp6',
        label: 'dcp6表'
      }],
      localTableValue: '',
      localTableValueChange: '',
      source: [{
        value: '61oracle',
        label: '61oracle源'
      }, {
        value: '62oracle',
        label: '62oracle源'
      }, {
        value: '63oracle',
        label: '63oracle源'
      }],
      sourceValue: '',
      sourceValueChange: '',
      sourceTableName: [],
      sourceTable1: [{
        value: 'dcp1',
        label: 'dcp1表'
      }, {
        value: 'dcp2',
        label: 'dcp2表'
      }],
      sourceTable2: [{
        value: 'dcp3',
        label: 'dcp3表'
      }, {
        value: 'dcp4',
        label: 'dcp4表'
      }],
      sourceTable3: [{
        value: 'dcp5',
        label: 'dcp5表'
      }],
      sourceTableValue: '',
      sourceTableValueChange: '',
      // 步骤条
      active: 0,
      form: {
        name: '',
        modelCode: '',
        modelName: '',
        tableName: '', // 目标表名
        nowSelectData: [], // 左边选中列表数据
        nowSelectRightData: [], // 右边选中列表数据
        selectArr: [], // 右边列表
        originalData: [], // 原始数据
        data1: [{
          field: 'PK_ID',
          type: 'VARCHAR',
          cname: '主键'
        }, {
          field: 'APP_CODE',
          type: 'VARCHAR',
          cname: ''
        }, {
          field: 'APP_NAME',
          type: 'VARCHAR',
          cname: ''
        }, {
          field: 'PARENT_ID',
          type: 'VARCHAR',
          cname: ''
        }, {
          field: 'APP_SEQ',
          type: 'VARCHAR',
          cname: ''
        }, {
          field: 'APP_LEVEL',
          type: 'VARCHAR',
          cname: ''
        }, {
          field: 'IMPALA_USER',
          type: 'VARCHAR',
          cname: ''
        }, {
          field: 'IMPALA_PASSWORD',
          type: 'VARCHAR',
          cname: ''
        }]
      },
      // 存放详细信息
      lists: [{ modelCode: 'model1', data: [{
        field: 'PK_ID', type: 'VARCHAR', cname: '主键' }] },
      { modelCode: 'model2', data: [{
        field: 'PK_ID', type: 'VARCHAR', cname: '主键' }, { field: 'APP_CODE', type: 'VARCHAR', cname: '' }] },
      { modelCode: 'model3', data: [{
        field: 'PK_ID', type: 'VARCHAR', cname: '主键'
      }, { field: 'APP_CODE', type: 'VARCHAR', cname: '' }, { field: 'APP_NAME', type: 'VARCHAR', cname: '' }] }
      ],
      // 查询的详细信息
      listsDetail: [],
      formDetail: [],
      formDetails: [],
      // 控制修改dialog
      changeTableDataDialog: false,
      // 修改的标题信息
      product: ''
    }
  },
  methods: {
    // 主页的查询
    primaryToQuery(name, time) {
      if (!name) {
        return
      }
      this.queryTableData = []
      this.queryTableData.push(this.tableData.find(function(obj) {
        return obj.modelName === name
      }))
      this.tableData = this.queryTableData
    },
    // 主页重置
    primaryResetQuery() {
      this.tableData = this.temporaryTableData
    },
    // 修改和删除按钮控制,处理修改数据
    seleChange(selection) {
      if (selection.length > 0 && selection.length !== 1) {
        this.permissionRouter.edit = true
        this.permissionRouter.del = false
      } else if (selection.length === 1) {
        this.permissionRouter.edit = false
        this.permissionRouter.del = false
        this.listsDetail = []
        this.formDetail = []
        this.formDetails = []
        this.formDetails.push(selection[0])
        this.listsDetail.push(this.lists.find(x => x.modelCode === selection[0].modelCode))
        this.listsDetail[0].data.forEach(item => {
          if (item) {
            this.formDetail.push(item)
          }
        })
        this.product = '修改' + selection[0].modelName + '信息'
      } else {
        this.permissionRouter.edit = true
        this.permissionRouter.del = true
      }
    },
    // 处理修改数据
    toEdit() {
      this.form.originalData = []
      this.form.selectArr = this.formDetail
      this.form.data1.forEach(item => {
        if (item) {
          this.form.originalData.push(item)
        }
      })
      this.handleRemoveTabList(this.form.selectArr, this.form.originalData)
      this.form.modelCode = this.formDetails[0].modelCode
      this.form.modelName = this.formDetails[0].modelName
      this.changeTableDataDialog = true
      if (!this.localchoosed) {
        this.localTableValueChange = this.formDetails[0].sourceTableName
        this.form.tableName = this.formDetails[0].targetTableName
      } else if (!this.sourcechoosed) {
        this.sourceValueChange = this.formDetails[0].source
        this.sourceTableValueChange = this.formDetails[0].sourceTableName
        this.form.tableName = this.formDetails[0].targetTableName
      }
    },
    // 删除
    toDelete() {

    },
    checkboxT(row, rowIndex) {
      return row.id !== 1
    },
    // 取消
    cancel() {
      this.active = 0
      this.choosed = 0
      this.form.selectArr = []
      this.form.originalData = []
      this.form.localTableValue = ''
      this.sourceValue = ''
      this.sourceTableValue = ''
      this.form.modelCode = ''
      this.form.modelName = ''
      this.form.tableName = ''
      this.crud.cancelCU()
    },
    // 修改取消
    cancelChange() {
      this.active = 0
      this.choosed = 0
      this.changeTableDataDialog = false
      this.form.selectArr = []
      this.form.originalData = []
      this.form.localTableValueChange = ''
      this.sourceValueChange = ''
      this.sourceTableValueChange = ''
      this.form.modelCode = ''
      this.form.modelName = ''
      this.form.tableName = ''
    },
    next() {
      console.log(this.localTableValue)
      console.log(this.sourceTableValue)
      if (this.localTableValue) {
        this.form.modelCode = this.localTableValue
        this.form.modelName = this.localTableValue
      } else if (this.sourceTableValue) {
        this.form.modelCode = this.sourceTableValue
        this.form.modelName = this.sourceTableValue
      }
      if (this.active++ > 1) this.active = 0
      this.choosed++
    },
    back() {
      if (--this.active < 0) this.active = 0
      this.choosed--
    },
    // 本地选择
    localchoose() {
      this.localchoosed = false
      this.sourcechoosed = true
      this.sourceTableName = []
      this.sourceValue = ''
      this.sourceTableValue = ''
      this.form.originalData = []
      this.form.selectArr = []
    },
    // 源表拉取
    sourcechoose() {
      this.localchoosed = true
      this.sourcechoosed = false
      this.localTableValue = ''
      this.form.originalData = []
      this.form.selectArr = []
    },
    // 选择数据源
    sourceChange(value) {
      if (!value) {
        this.sourceTableName = []
        this.form.originalData = []
        this.sourceTableValue = ''
      }
      if (value === this.source[0].value) {
        this.sourceTableName = this.sourceTable1
      } else if (value === this.source[1].value) {
        this.sourceTableName = this.sourceTable2
      } else if (value === this.source[2].value) {
        this.sourceTableName = this.sourceTable3
      }
    },
    // 选择数据源表,或本地表
    sourceTable(value) {
      if (!value) {
        this.form.originalData = []
        return
      }
      this.form.data1.forEach(item => {
        if (item) {
          this.form.originalData.push(item)
        }
      })
    },
    checkAll(rows) {
      this.form.nowSelectData = []
      if (rows) {
        rows.forEach(row => {
          if (row) {
            this.form.nowSelectData.push(row)
          }
        })
      }
      console.log(rows)
      console.log(this.form.nowSelectData)
    },
    checkRightAll(rows) {
      this.form.nowSelectRightData = []
      if (rows) {
        rows.forEach(row => {
          if (row) {
            this.form.nowSelectRightData.push(row)
          }
        })
      }
    },
    // 选中
    handelSelect() {
      this.form.selectArr = this.handleConcatArr(this.form.selectArr, this.form.nowSelectData)
      this.handleRemoveTabList(this.form.nowSelectData, this.form.originalData)
      this.form.nowSelectData = []
    },
    // 取消
    handleRemoveSelect() {
      this.form.originalData = this.handleConcatArr(this.form.originalData, this.form.nowSelectRightData)
      this.handleRemoveTabList(this.form.nowSelectRightData, this.form.selectArr)
      this.form.nowSelectRightData = []
    },
    handleConcatArr(selectArr, nowSelectData) {
      let arr = []
      arr = arr.concat(selectArr, nowSelectData)
      return arr
    },
    // 删除移动行
    handleRemoveTabList(isNeedArr, originalArr) {
      if (isNeedArr.length && originalArr.length) {
        for (let i = 0; i < isNeedArr.length; i++) {
          for (let k = 0; k < originalArr.length; k++) {
            if (isNeedArr[i]['field'] === originalArr[k]['field']) {
              originalArr.splice(k, 1)
            }
          }
        }
      }
    },
    // 编辑表格
    handleEdit(index, row) {
      console.log(index, row)
    },
    // 改变状态
    changeEnabled(data, status) {
      let val = false
      if (status === 0) {
        val = true
      }
      this.$confirm('此操作将 "' + this.dict.label.dataconfig_status[val] + '" ' + data.modelName + '模型, 是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        crud.crudMethod.edit(data).then(() => {
          crud.notify(this.dict.label.dataconfig_status[val] + '成功', 'success')
        }).catch(err => {
          data.enabled = !data.enabled
          console.log(err.data.message)
        })
      }).catch(() => {
        data.enabled = !data.enabled
      })
    },
    // 查看详细信息
    handleClick(row) {
      console.log(row)
    },
    // 设置表格row-key
    getRowKey(row) {
      return row.field
    }
  }
}
</script>

<style scoped>
  .opSetting{
    text-align: center;
    margin-top:30px;
  }
  .spacing{
    margin-top:10px;
  }
  .tb-edit .el-input {
    display: none
  }
  .tb-edit .current-row .el-input {
    display: block
  }
  .tb-edit .current-row .el-input+span {
    display: none
  }
</style>
